<template>
  <div>
    <el-container>
      <el-header style="padding-left: 0px;padding-right: 0px">
<!--用户信息和退出登录-->
        <div style="position: fixed; z-index: 1000; margin-left: 91%">
          <el-tooltip class="item" effect="dark" content="设置" placement="bottom">
            <el-menu style="border: 0px" class="el-menu-vertical-demo">
              <el-submenu index="0">
                <template slot="title">
                  <i class="el-icon-s-tools" style="font-size: x-large"></i>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="0-1" @click="amend">用户信息</el-menu-item>
                  <el-menu-item index="0-2" @click="exit">退出登录</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-tooltip>
        </div>

<!--头 -->
        <Top></Top>
      </el-header>

      <el-main :style=style_top >
        <router-view/>
      </el-main>
    </el-container>
<!--弹出信息修改框-->
    <el-drawer
        z-index="1000"
        title="用户信息"
        :visible.sync = drawer
        :direction="direction">

<!--用户信息-->
        <el-form :label-position="right" label-width="80px" :model="formLabelAlign">
          <el-form-item label="昵称">
            <el-input v-model="user.nickName"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-row>
              <el-col span="8">
                <el-select class="arriveClass" v-model="user.province" placeholder="请选择省份" @change="provinceChange($event)">
                  <el-option v-for="(item,index) in provinceList" :key="item.name" :value="item.name"></el-option>
                </el-select>
              </el-col>

              <el-col span="8">
                <el-select class="arriveClass" v-model="user.city" placeholder="请选择城市" @change="cityChange($event)">
                  <el-option v-for="(item,index) in cityList" :key="index" :value="item.name"></el-option>
                </el-select>
              </el-col>

              <el-col span="8">
                <el-select class="arriveClass" v-model="user.county" placeholders="请选择区县">
                  <el-option v-for="(item,index) in countyList" :key="index" :value="item.name"></el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="user.email"></el-input>
          </el-form-item>
          <el-form-item label="生日">
            <el-date-picker type="date"  v-model="user.birthday" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-form>

<!--图片展示 -->
      <div>
        <el-row>
          <el-col span="4" style="text-align: center">
            <h5>背景图片</h5>
          </el-col>
          <el-col span="8">
            <el-upload
                ref="elupload"
                action="http://10.1.188.122:8081/upload-file/B"
                :headers="myHeaders"
                list-type="picture-card"
                limit="1"
            >
              <el-image :src="user.backgroundImage" style="width: 100%;height: 100%"></el-image>
            </el-upload>
          </el-col>
          <el-col span="4" style="text-align: center">
            <h5>头像</h5>
          </el-col>
          <el-col span="8">
            <el-upload
                ref="elupload"
                action="http://10.1.188.122:8081/upload-file/I"
                :headers="myHeaders"
                list-type="picture-card"
                limit="1"
            >
              <el-image :src="user.icon" style="width: 100%;height: 100%" ></el-image>
            </el-upload>
          </el-col>
        </el-row>
      </div>

<!-- 提交修改信息-->
      <div style="margin-top: 60%">
        <el-row>
          <el-col span="12">
            <el-button type="primary" icon="el-icon-tickets" @click="amendUser">修改</el-button>
          </el-col>
          <el-col span="12">
            <el-button type="primary" icon="el-icon-back" @click="handleClose">返回</el-button>
          </el-col>
        </el-row>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import Top from '@/components/proscenium/mian_hander'
import Home from '@/components/proscenium/main_home'
import {getSession, getToken} from "@/utils/Token";
import {getUser,setUser} from "@/api/api";
import {getAddress} from "@/api/baidu";

var token = getToken('token');
export default {
  name: "Main",
  components: {
    Top,
    Home
  },
  data() {
    return {
      style_top:{'padding-top': '10px'},
      drawer: false,
      direction: 'rtl',
      user:{},
      UserGender:'',
      Gender:'',
      /*在上传照片时含有token*/
      myHeaders: {Authorization: token},
      /*省份信息*/
      provinceList:[],
      cityList:[],
      countyList:[],
      CITY:[],
      XIAN:[],
    };
  },

  methods: {
    /*修改用户信息*/
    amendUser(){
      setUser(this.user).then((res)=>{
        if(res.data.status === 200){
          this.$message({message: res.data.msg,type:'success'});
          this.handleClose();
        }
      })
    },
    /*文件上传成功时调用函数*/
    success(file,tag){
      if(tag === 'B'){
        this.user.backgroundImage = file.url;
      }else {
        this.user.icon = file.url;
      }
    },
    /*退出登录*/
    exit(){
      localStorage.clear();
      sessionStorage.clear();
      this.$router.push('/');
    },
    /*获得用户信息*/
    amend(){
      getUser(getToken('userId')).then((res)=>{
        if(res.data.status===200){
          this.user = res.data.data
          if(this.user.gender===2){
            this.UserGender = '女';
            this.Gender = 'el-icon-female';
          }
          this.provinceChange(this.user.province);
          this.cityChange(this.user.city);
          this.drawer = true;
        }
      })

    },
    /*侧片框弹出关闭功能*/
    handleClose() {
      this.drawer = false;
    },
    /*监听窗口的滚动后调用的方法*/
    showIcon(){
      if(!!document.documentElement.scrollTop &&
      document.documentElement.scrollTop > 65
    ){
        /*这个是大于65px*/
        this.style_top["padding-top"]= '0px';
      } else {
        /*这个是小于65px*/
        this.style_top["padding-top"]= '10px';
      }
    },
    handleTouchMove() {
      this.scroll=
          document.documentElement.scrollTop ||
          window.pageYOffset ||
          document.body.scrollTop
    },

    /*根据选中省去匹配市*/
    provinceChange(that){
      let cityCode = 0
      let newCityArry = []
      this.provinceList.forEach((item,index)=>{
        if(item.name == that){
          cityCode = item.code
        }
      })
      if(cityCode){
        this.cityList = []
        this.CITY.forEach((item,index)=>{
          if(item.code == cityCode){
            this.cityList.push(item)
          }
        })  /* 市匹配成功*/
      }
    },

    /*根据选中市去匹配县，区*/
    cityChange(that){
      let countyCode = 0
      let cityname = ''
      let newCountyArry = []
      this.cityList.forEach((item,index)=>{
        if(item.name == that){
          countyCode = item.id
          cityname = item.name
        }
      })
      if(countyCode){
        this.countyList = []
        this.XIAN.forEach((item,index)=>{
          if(item.code == countyCode && item.cityCountyName == cityname){
            this.countyList.push(item)
          }
        })
      }
    },
  },
  mounted() {
    /*监听窗口滚动后调用方法*/
    window.addEventListener("scroll", this.showIcon);
  },
  /*创建时请求地图接口*/
  created() {
    getAddress().then((res)=>{
      this.provinceList = res.data.districts[0].districts  /*省*/
      /* 进行遍历赋值*/
      /* 市区和县区*/
      let newProvince = this.provinceList
      for(let i = 0; i < newProvince.length; i++){              /* 省级*/
        for(let j = 0; j < newProvince[i].districts.length; j++){       /* 市级*/
          let city = newProvince[i].districts[j].name
          this.CITY.push({id:j+1,name:city,code:i+1})
          for(let k = 0;k<newProvince[i].districts[j].districts.length; k++){/* 县级*/
            let xian = newProvince[i].districts[j].districts[k].name
            this.XIAN.push({id:k+1,name:xian,code:j+1,cityCountyName:city})
          }
        }
      }
      for(let m = 0; m < newProvince.length;m++){
        newProvince[m] = {...newProvince[m],...{code:m+1}}
      }
      this.provinceList = newProvince;
    })
  }
}
</script>

<style >

</style>